import { Link, connect, history } from 'umi';

import { Card, Tabs } from 'antd';
import styles from './style.less'
import { useState } from 'react';
import { useEffect } from 'react';
import DepartmentManage from './../components/DepartmentManage'
import EnterpriseUser from './../components/EnterpriseUser'
import EnterpriseRole from './../components/EnterpriseRole'
const { TabPane } = Tabs;



const operationTabList = [
    {
        key: 'department',
        tab: (
            <span>
                组织架构
            </span>
        ),
    },
    {
        key: 'user',
        tab: (
            <span>
                成员管理
            </span>
        ),
    },
    {
        key: 'role',
        tab: (
            <span>
                角色管理
            </span>
        ),
    },
];


const Manage = (props) => {
    const {
        dispatch,

    } = props;

    const [tabKey, setTabKey] = useState('department')
    const [tabValue, setTabValue] = useState();

    const onTabChange = (key) => {
        setTabKey(key)
        history.replace("/enterprise/manage?tabKey=" + key)
    };

    useEffect(() => {
        const unlisten = history.listen((location, action) => {
            if (location.query.tabKey) {
                setTabKey(location.query.tabKey)
            }
        });
        return () => {
            unlisten()
        }
    }, [])

    let enterpriseId = localStorage.getItem("enterpriseId");
    return (
        <Tabs
            className={styles.tabBody}
            activeKey={tabKey}
            onChange={onTabChange}
        >
            <TabPane tab="组织架构" key="department">
                <DepartmentManage enterpriseId={enterpriseId} />
            </TabPane>
            <TabPane tab="成员管理" key="user">
                <EnterpriseUser enterpriseId={enterpriseId} />
            </TabPane>
            <TabPane tab="角色管理" key="role">
                <EnterpriseRole enterpriseId={enterpriseId} />
            </TabPane>
        </Tabs>
    )
}

export default connect(() => ({
}))(Manage);